<template>
  <div>

    <el-dialog width="80%" center title="菜单ECharts树状图表" :visible.sync="dialogMenushuVisible">
      <div id="main" style="width: 100%;height: 500px;background-color: #00afff" ></div>
    </el-dialog>
    <el-dialog center title="菜单ECharts扇形图表" :visible.sync="dialogMenuyuanVisible">
      <div id="main" style="width: 100%;height: 500px;background-color: #00afff" ></div>
    </el-dialog>

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="菜单名称" prop="menuName">
        <el-input
          v-model="queryParams.menuName"
          placeholder="请输入菜单名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="菜单状态" clearable size="small">
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary">导入</el-button>
    <el-button type="success" @click="test22">导出</el-button>
    <el-button type="warning" @click="outEasyExcel">导出</el-button>
    <el-button type="info" @click="outECHartsshu">树状图ECharts 图表</el-button>
    <el-button type="info" @click="outECHartsyuan">扇形图ECharts 图表</el-button>
    <el-button type="danger" @click="openAddMenu">新增</el-button>


    <el-table
      :data="tableData"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
      <el-table-column
        fixed
        prop="name"
        label="菜单名称"
        :show-overflow-tooltip="true"
        width="150">
      </el-table-column>
      <el-table-column
        prop="icon"
        label="标识"
        width="120">
        <template slot-scope="scope">
          <svg-icon :icon-class="scope.row.icon"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="component"
        label="组件路径"
        width="120">
      </el-table-column>
      <el-table-column
        prop="status"
        label="显示状态"
        :formatter="statusFormat"
        width="120">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="300">
      </el-table-column>
      <el-table-column
        prop="pic"
        label="图片"
        width="300">
        <template slot-scope="scope">
            <el-image :src="scope.row.pic" style="width: 70px; height: 70px;"/>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {listHuToolMenu,getMenuChartsshu,getMenuChartsyuan} from "@/api/system/menu";
import Treeselect from "@riophae/vue-treeselect";
import IconSelect from "@/components/IconSelect";
export default {
  name: "hutoolindex",
  components: { Treeselect, IconSelect },
  data() {
    return {
      tableData:[],
      queryParams:{
        menuName:undefined,
        status:undefined,
      },
      showSearch: true,
      statusOptions:[],
      loading: false,
      dialogMenushuVisible:false,
      dialogMenuyuanVisible:false,
    }
  }, methods: {
      //添加按钮
      // openAddMenu(){
      //
      // },
      getTableData(){
        this.loading = true;
        listHuToolMenu(this.queryParams).then(respose => {
          this.tableData = this.handleTree(respose.data, "id");
          this.loading = false;
        });
      },
      handleQuery(){
        this.getTableData();
      },
      statusFormat(row, column){
         if (row.menuType == "F"){
           return "";
         }
         return this.selectDictLabel(this.statusOptions, row.status);
      },
      resetQuery(){
        this.queryParams = {};
        this.getTableData();
      },
      test22(){
        this.download('system/menu/test22',{
          ...this.queryParams
        }, `menu_${new Date().getTime()}.xls`)
      },
      outEasyExcel(){
        this.download('system/menu/outEasyExcel',{
          ...this.queryParams
        }, `menu新_${new Date().getTime()}.xls`)
      },
      outECHartsyuan(){
        this.dialogMenuyuanVisible = true;
        this.$nextTick(()=>{
          let formData = [];

          var chartDom = document.getElementById('main');
          var myChart = echarts.init(chartDom);
          getMenuChartsyuan().then(response =>{
              formData = response.data;
              console.log(formData);

            const option = {
              title: {
                text: '菜单',
                subtext: 'Fake Data',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              series: [
                {
                  name: 'Access From',
                  type: 'pie',
                  radius: '50%',
                  data: formData,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };

            option && myChart.setOption(option);
          });
        });
      },
      outECHartsshu(){
        this.dialogMenushuVisible = true;
        this.$nextTick(()=>{
          let formData = [];
          let ydata = [];
          let xdata = [];

          var chartDom = document.getElementById('main');
          var myChart = echarts.init(chartDom);

          getMenuChartsshu().then(response => {
            formData = response;
            console.log(formData);
            xdata = formData.data.map(item => item.xdata);
            ydata = formData.data.map(item => item.ydata);

            const option = {
              xAxis: {
                type: 'category',
                data: xdata
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: ydata,
                  type: 'bar'
                }
              ]
            };

            option && myChart.setOption(option);
          });
        });
      },
  }, created() {
      this.getTableData();
      this.getDicts("sys_normal_disable").then(response => {
        this.statusOptions = response.data;
      });
  }
};
</script>

<style scoped>

</style>
